  <template lang="html">
  <div class="question_content">
    <div class="question_content_head clearfixed">
        <img @click="goBack()" class="left" v-bind:src="leftSrc" alt="">
        <img class="right" v-bind:src="collect" alt="">
        <p>问答</p>
    </div>
    <div class="question_content_body">
      <h2 class="question_titles">{{ titles }}</h2>
      <p class="question_asker">{{ asker }}问:</p>
      <p class="question_question">{{ question }}</p>
      <p class="question_answerer">{{ answerer }}答:</p>
      <div v-html="answer" class="question_answer"></div>
      <p class="question_edt">{{ edt }}</p>
      <div class="author">
        <p class="fixed_centent">作者</p>
        <img :src="imgsrc" alt="" class="author_img" @touchstart="fangda()" @touchend="suoxiao()">
        <p class="author_name">{{ names }}</p>
        <p class="author_summary">{{ summary }}</p>
        <span @click="attention()" class="attention">关注</span>
        <!-- 作者小弹窗 -->
        <div class="hidde">
          <img :src="imgsrc" alt="" class="author_img">
          <p class="author_name">{{ names }}</p>
          <p class="author_summary">{{ summary }}</p>
          <p class="desc">{{ desc }}</p>
          <span class="sanjiao"></span>
        </div>
      </div>

      <!-- <div class="hidde">
        <img :src="imgsrc" alt="" class="author_img">
        <p class="author_name">{{ names }}</p>
        <p class="author_summary">{{ summary }}</p>
        <p class="desc">{{ desc }}</p>
        <span class="sanjiao"></span>
      </div> -->
    </div>
    <!-- 评论区 -->
    <div class="question_comment">
      <p class="question_comment_p">评论列表</p>
      <ul>
        <li v-for="(item,index) in arr">
          <div class="">
            <div class="commenter">
              <img :src="item.user.web_url" alt="" class="commenter_img">
              <span>{{ item.user.user_name }}</span>
              <time>{{ item.input_date.substring(0,16).replace(/-/g, ".") }}</time>
            </div>
            <p>{{ item.content }}</p>
            <div class="comment_pic">
              <span class="icon-message"></span>
              <span class="icon-hands num" @click="add(item.praisenum)"></span>
              <span class="shownum" v-model="item.praisenum">{{ item.praisenum }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="comment">
      <input type="text" class="comment_content" name="" value="">
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components:{

  },
  data(){
    return{
      leftSrc:'../../static/img/left.png',
      collect:'../../static/img/collect.png',
      titles:'',
      asker:'',
      question:'',
      answerer:'',
      answer:'',
      edt:'',
      names:'',
      imgsrc:'',
      summary:'',
      desc:'',

      arr:'',
      flag:true,
      timer:''
    }
  },
  created(){
    axios.get("http://v3.wufazhuce.com:8000/api/question/" + this.$route.params.id +  "?channel=wdj&source=channel_reading&source_id=9254&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((content)=>{
      console.log(content.data.data);
      this.titles = content.data.data.question_title;
      this.asker = content.data.data.asker.user_name;
      this.question = content.data.data.question_content;
      this.answerer = content.data.data.answerer.user_name;
      this.answer = content.data.data.answer_content;
      this.edt = content.data.data.charge_edt + content.data.data.charge_email;
      this.names = content.data.data.author_list[0].user_name + ' ' + content.data.data.author_list[0].wb_name;
      this.imgsrc = content.data.data.author_list[0].web_url;
      this.summary = content.data.data.author_list[0].summary;
      this.desc = content.data.data.author_list[0].desc;
      console.log(this.names);

      axios.get("http://v3.wufazhuce.com:8000/api/comment/praiseandtime/question/" + this.$route.params.id + "/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((comment)=>{
        console.log(comment.data.data.data);
        this.arr = comment.data.data.data;
      })
    })
  },
  methods:{
    goBack(){
      history.back();
    },
    add(item){
      if(this.flag){
        let showNum =document.querySelectorAll('.shownum');
        let numTag =document.querySelector('.num');
        showNum.innerHTML = item.praisenum + 1;
        numTag.style.color = 'red';
        this.flag = false;
        console.log(this);
      }else{
        let showNum =document.querySelectorAll('.shownum');
        let numTag =document.querySelector('.num');
        showNum.innerHTML = item.praisenum;
        numTag.style.color = 'gray';
        this.flag = true;
      }
    },
    fangda(){
      let hidde = document.querySelector('.hidde');
      this.timer = setTimeout(function(){
        console.log(hidde);
        hidde.style.display = 'block';
      }, 1000)
    },
    suoxiao(){
      console.log(this.timer);
      let hidde = document.querySelector('.hidde');
      hidde.style.display = 'none';
      clearTimeout(this.timer);
    }
  }
}
</script>

<style lang="css" scoped>
*{
  margin:0;
  padding:0;
}
ul,ol,dl{
  list-style: none;
}
.question_content{
  width:100%;
}
.question_content_head{
  width:100%;
  height: 4rem;
  position: fixed;
  top:0;
  background-color: white;
  border-bottom: 0.08rem solid lightgray;
}
.question_content_head>.left{
  float: left;
  margin:1.5rem  0 0 2rem;
}
.question_content_head>.right{
  float: right;
  margin:1.2rem 2rem 0 0;
}
.question_content_head>p{
  font-size: 2rem;
  padding:1.3rem 0 0 0;
}
.question_content_body{
  width:90%;
  margin:0 auto;
  padding-top: 4rem;
  text-align: left;
}
.question_titles{
  font-size: 2.4rem;
  line-height: 3rem;
  margin: 2rem 0;
}
.question_asker,.question_answerer,.question_edt{
  font-size: 0.9rem;
  color: lightgray;
  line-height: 2.5rem;
  margin-bottom:0.8rem;
}
.question_question,.question_answer{
  font-size: 1.2rem;
  line-height: 2rem;
  margin-bottom:2rem;
}
.clear_fixed:after{
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
}
/*作者*/
.author{
  margin:2rem 0;
  position: relative;

}
.author .fixed_centent{
  font-size: 1.1rem;
  text-align: left;
  line-height: 2.5rem;
  width:4.4rem;
  border-bottom: 3px solid black;
}
.author .author_img{
  width:3.5rem;
  height:3.5rem;
  border-radius: 50%;
  margin-top: 1.5rem;
  float: left;
}
.author .author_name{
  display: inline-block;
  margin:1.5rem 0 0 0.8rem;
  line-height: 2rem;
}
.author .author_summary{
  margin:0 0 0 0.8rem;
  line-height: 2rem;
  height:2rem;
  width: 60%;
  color: gray;
  display: inline-block;
}
.author .attention{
  float: right;
  display: inline-block;
  width:4rem;
  height:2rem;
  line-height: 2rem;
  text-align: center;
  border:1px solid lightgray;
  border-radius: 0.3rem;
}
/*作者小弹窗*/
.hidde{
  width:60%;
  /*height:10rem;*/
  background: #f5f4f4;
  text-align: center;
  border-radius: 8px;
  display: none;
  position: absolute;
  bottom: 8rem;
  left: 5rem;
}
.hidde>.author_img{
  margin:1rem 0 0rem 35%;
  clear: both;
  width:5rem;
  height:5rem;
  border-radius: 50%;
}
.hidde .author_summary{
  margin:0 0 0 0.8rem;
  line-height: 2rem;
  height:2rem;
  width: 60%;
  color: gray;
  display: inline-block;
}
.desc{
  margin:1rem 1rem 0 1rem;
  padding:0 0 1.5rem 0;
  line-height: 1.5rem;
}
.sanjiao{
  width: 0;
  height: 0rem;
  border: 1rem solid transparent;
  border-top: 1rem solid #f5f4f4;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
}

/*评论*/
.question_comment{
  width:90%;
  margin:0 auto;
  text-align: left;
}
.question_comment_p{
  font-size: 1rem;
  width:4rem;
  line-height: 2.5rem;
  border-bottom: 3px solid black;
  margin-top:1.5rem;
}
.commenter_img{
  width:1.5rem;
  height:1.5rem;
  border-radius: 50%;
  vertical-align: middle;
}
.question_comment li{
  border-bottom: 1px solid lightgray;
  padding:1.3rem 0;
}
.question_comment span{
  color:lightgray;
  vertical-align: middle;
}
.question_comment time{
  color: lightgray;
  float: right;
}
.question_comment li p{
  margin:1rem 0 0 1.5rem;
  line-height: 2rem;
}
.comment_pic{
  text-align: right;
  margin:1rem 0 0 0;
}
.icon-hands:before {
  content: "\e901";
  font-size: 2rem;
}
.comment_pic>span{
  margin-right: 1rem;
}
.icon-message:before {
  content: "\e900";
  font-size: 2rem;
}
</style>
